<script setup lang="tsx">
import { PropType, ref } from 'vue'
import { Descriptions, DescriptionsSchema } from '@/components/Descriptions'
import { ElTag, ElTable, ElTableColumn } from 'element-plus'
import { useI18n } from '@/hooks/web/useI18n'
import { Log } from '@/utils/logError'
import { getDictDetailApi } from '@/api/dict'
import { DictPageResponse } from '@/api/dict/types'
import { cloneDeep } from 'lodash-es'

const { t } = useI18n()

const props = defineProps({
  currentRow: {
    type: Object as PropType<DictPageResponse | null>,
    default: () => {}
  }
})

const detailSchema = ref<DescriptionsSchema[]>([
  {
    field: 'name',
    label: t('dict.name')
  },
  {
    field: 'code',
    label: t('dict.code')
  },
  {
    field: 'isSystem',
    label: t('dict.isSystem'),
    slots: {
      default: (data: any) => {
        return (
          <ElTag type={data.isSystem ? 'primary' : 'danger'}>
            {data.isSystem ? t('common.yes') : t('common.no')}
          </ElTag>
        )
      }
    }
  },
  {
    field: 'status',
    label: t('common.status'),
    slots: {
      default: (data: any) => {
        return (
          <ElTag type={data.status ? 'success' : 'danger'}>
            {data.status ? t('common.enable') : t('common.disable')}
          </ElTag>
        )
      }
    }
  },
  {
    field: 'createAt',
    label: t('common.createTime'),
    slots: {
      default: (data: any) => {
        return <>{data.updatedAt}</>
      }
    }
  },
  {
    field: 'updateAt',
    label: t('common.updateTime'),
    slots: {
      default: (data: any) => {
        return <>{data.updatedAt}</>
      }
    }
  },
  {
    field: 'description',
    label: t('common.remark'),
    span: 24
  },
  {
    field: 'item',
    label: t('dict.item'),
    span: 24,
    slots: {
      default(data: any) {
        return (
          <ElTable data={data.item || []}>
            <ElTableColumn type="index" />
            <ElTableColumn prop="label" label={t('dict.itemName')} />
            <ElTableColumn prop="value" label={t('dict.itemCode')} />
            <ElTableColumn
              prop="status"
              label={t('common.status')}
              v-slots={{
                default: ({ row }) => {
                  return (
                    <ElTag type={row.status ? 'success' : 'danger'}>
                      {row.status ? t('common.enable') : t('common.disable')}
                    </ElTag>
                  )
                }
              }}
            />
          </ElTable>
        )
      }
    }
  }
])

const departmentDetailData = ref()

const getDictDetail = async () => {
  try {
    const { code } = props.currentRow || {}
    if (!code) return (departmentDetailData.value = {})
    const res = await getDictDetailApi(code)
    departmentDetailData.value = { ...cloneDeep(props.currentRow), item: res.data }
  } catch (error) {
    Log.error('getDictDetail', error)
  }
}
getDictDetail()
</script>

<template>
  <Descriptions :schema="detailSchema" :data="departmentDetailData || {}" />
</template>
